<template>
    <!-- 课程管理 -->
    <div class="scheme">
        <div class="header-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="课程状态：">
                    <el-select v-model="formInline.status" placeholder="请选择" clearable>
                        <el-option label="全部" value=""></el-option>
                        <el-option label="上架" value="1"></el-option>
                        <el-option label="下架" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程名称搜索：">
                    <el-input v-model="formInline.name" placeholder="请输入搜索课程名称"></el-input>
                </el-form-item>
                <el-form-item label="课程类别:">
                    <el-select v-model="formInline.type_id" placeholder="请选择" style="width: 100%;">
                        <el-option label="全部" value=""></el-option>
                        <el-option :label="item.name" :value="item.id" v-for="item in typeList" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属门店:">
                    <el-select v-model="formInline.store_id" placeholder="请选择门店">
                        <el-option label="全部" value=""></el-option>
                        <el-option :label="item.name" :value="item.id" v-for="item in storeList" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="教练：">
                    <el-select v-model="formInline.teacher_id" placeholder="请选择">
                        <el-option label="全部" value="">
                        </el-option>
                        <el-option :label="item.nickname" :value="item.id" v-for="item in teacherList" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标签：">
                    <el-select v-model="formInline.tag_id" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option :label="item.name" :value="item.code" v-for="item in tagList" :key="item.code">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程时间：">
                    <el-select v-model="formInline.week" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option :label="item.name" :value="item.id" v-for="item in weekList" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格：">
                    <el-input v-model="formInline.start_price" style="width: 180px;" placeholder="请输入起始价格"></el-input>
                    -
                    <el-input v-model="formInline.end_price" style="width: 180px;" placeholder="请输入终止价格"></el-input>
                </el-form-item>
                <el-form-item label="课程ID搜索：">
                    <el-input v-model="formInline.id" placeholder="请输入搜索课程ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-plus" @click="addCourse">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tables">
            <el-table border :data="tableData" max-height="650" highlight-current-row :row-style="{height: '20px'}"
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                <el-table-column prop="id" align="center" label="ID" width="60">
                </el-table-column>
                <el-table-column prop="name" align="center" label="课程名称"></el-table-column>
                <el-table-column prop="price" align="center" label="价格"></el-table-column>
                <el-table-column prop="num" align="center" label="人数限制"></el-table-column>
                <el-table-column prop="type_name" align="center" label="课程类型"></el-table-column>
                <el-table-column prop="store_name" align="center" label="所属门店"></el-table-column>
                <el-table-column prop="teacher_name" align="center" label="教练">
                </el-table-column>
                <el-table-column prop="tag_names" label="课程标签" align='center' width="160">
                    <template slot-scope="scope">
                        <el-tag :type="'success'" v-for="item in scope.row.tag_names" :key="item">
                            {{ item }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="time_name" align="center" label="课程时间">
                </el-table-column>
                <el-table-column prop="address" align="center" label="课程地点">
                </el-table-column>
                <el-table-column prop="status" align="center" label="课程状态" width="80">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'" disable-transitions>
                            {{ scope.row.status === 1 ? '上架' : '下架' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="can_point_pay" align="center" label="可用积分支付" width="80">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.can_point_pay === 1 ? 'success' : 'danger'" disable-transitions>
                            {{ scope.row.can_point_pay === 1 ? '是' : '否' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" plain icon="el-icon-edit" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button size="mini" type="warning" plain icon="el-icon-tickets"
                                   @click="handleUserCourse(scope.row.id)">报名情况
                        </el-button>
                        <el-button size="mini" type="danger" plain icon="el-icon-delete"
                                   @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[15, 20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 新增课程弹框 -->
        <el-dialog :title="title" :visible.sync="dialogAddCourse" width="60%" >
            <el-form :model="form" label-width="180px">
                <el-form-item label="课程名称:">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="课程类别:">
                    <el-select size="mini" v-model="form.type_id" placeholder="请选择" style="width: 100%;">
                        <el-option :label="item.name" :value="item.id" v-for="item in typeList" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属门店:">
                    <el-select size="mini" v-model="form.store_id" placeholder="请选择" style="width: 100%;">
                        <el-option :label="item.name" :value="item.id" v-for="item in storeList" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程标签:">
                    <el-checkbox-group v-model="form.tag_id">
                        <el-checkbox v-for="item in tagList" :key="item.code" :label="item.code">
                            {{ item.name }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="人数限制:">
                    <el-input v-model="form.num" :min="0" placeholder="请输入人数限制" style="width:200px">
                        <template slot="append">人</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="课程费用:">
                    <el-input v-model="form.price" placeholder="请输入费用" style="width:200px">
                        <template slot="append">元/节</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="可用积分支付:" prop="is_top">
                    <el-radio-group v-model="form.can_point_pay" size="medium">
                        <el-radio border label="1">是</el-radio>
                        <el-radio border label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="可选择购买次数:">
                    <el-select v-model="form.buy_times" multiple placeholder="请输入可选择购买次数" style="width: 100%;">
                        <el-option v-for="item in numberList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开课时间:">
                    每周
                    <el-select v-model="form.week" placeholder="请选择">
                        <el-option label="请选择" :value="0"></el-option>
                        <el-option label="一" :value="1"></el-option>
                        <el-option label="二" :value="2"></el-option>
                        <el-option label="三" :value="3"></el-option>
                        <el-option label="四" :value="4"></el-option>
                        <el-option label="五" :value="5"></el-option>
                        <el-option label="六" :value="6"></el-option>
                        <el-option label="日" :value="7"></el-option>
                    </el-select>&nbsp;&nbsp;
                    <el-time-picker placeholder="选择开始时间" format="HH:mm" value-format="HH:mm"
                                    v-model="form.start_time" style="width: 25%;"></el-time-picker>
                    -
                    <el-time-picker placeholder="选择结束时间" format="HH:mm" value-format="HH:mm"
                                    v-model="form.end_time" style="width: 25%;"></el-time-picker>

                </el-form-item>
                <el-form-item label="具体时间:">
                    <el-date-picker style="width: 100%;" v-model="form.time_info" type="dates" format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd" placeholder="选择一个或多个日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="地址:">
                    <el-input v-model="form.address" style="width: 100%;" placeholder="请输入地址" @change="searchHandler">
                    </el-input>
                    <div class="location">
                        <h3>经度：{{ form.lon }}</h3>
                        <h3>纬度：{{ form.lat }}</h3>
                    </div>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="form.order" :min="1" :max="10000"></el-input-number>
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">上架</el-radio>
                        <el-radio :label="2">下架</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="教练：">
                    <el-select style="width: 100%;" size="mini" v-model="form.teacher_id" placeholder="请选择">
                        <el-option :label="item.nickname" :value="item.id" v-for="item in teacherList" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="图片" prop="image">
                    <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
                               :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="form.image" :src="form.image" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png/gif文件，且不超过10M，建议500*320</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="简介">
                    <quill-editor class="ql-editor" ref="quillEditor" v-model="form.desc"
                                  :options="editorOption"></quill-editor>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddCourse = false">取 消</el-button>
                <el-button type="primary" @click="submitCourseData">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 报名详情弹框 -->
        <el-dialog title="约课详情记录" :visible.sync="dialogInfo" width="65%" :close-on-click-modal="false"
                   :close-on-press-escape="false">
            <el-form :inline="true" :model="infoForm" class="demo-form-inline">

                <el-form-item label="用户昵称搜索：">
                    <el-input v-model="infoForm.nickname" placeholder="请输入用户昵称"></el-input>
                </el-form-item>
                <el-form-item label="用户手机搜索：">
                    <el-input v-model="infoForm.mobile" placeholder="请输入用户手机号码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitInfoForm">搜索</el-button>
                </el-form-item>

            </el-form>
            <el-table border :data="userCourseList" height="350" highlight-current-row :row-style="{height: '20px'}"
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                <el-table-column prop="id" align="center" label="约课ID"></el-table-column>
                <el-table-column prop="course_name" align="center" label="课程名称"></el-table-column>
                <el-table-column prop="week_time" align="center" label="课程时间" show-overflow-tooltip></el-table-column>
                <el-table-column prop="user_nickname" align="center" label="用户昵称"></el-table-column>
                <el-table-column prop="user_mobile" align="center" label="用户手机号"></el-table-column>
                <el-table-column prop="price" align="center" label="单价"></el-table-column>
                <el-table-column prop="book_num" align="center" label="预订节数"></el-table-column>
                <el-table-column prop="book_money" align="center" label="总金额"></el-table-column>
                <el-table-column prop="used_num" align="center" label="总金额"></el-table-column>

                <el-table-column prop="status_name" align="center" label="支付状态"></el-table-column>

                <el-table-column prop="created_at" align="center" label="创建日期"></el-table-column>

                <el-table-column align="center" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" plain icon="el-icon-edit" v-if="scope.row.back_num>0"
                                   @click="goToRefund(scope.row.order_no)">
                            退款详情
                        </el-button>
                        <el-button size="mini" type="warning" plain icon="el-icon-tickets"
                                   @click=goToInfo(scope.row.order_no)>约课详情
                        </el-button>

                    </template>
                </el-table-column>

            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleInfoSizeChange" @current-change="handleInfoCurrentChange"
                               :current-page.sync="pageInfo" :page-sizes="[10, 20, 50, 100]" :page-size="limitInfo"
                               layout="total, sizes, prev, pager, next, jumper" :total="totalInfo">
                </el-pagination>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import {
    quillEditor
} from "vue-quill-editor";
import {
    quillRedefine
} from 'vue-quill-editor-upload'
import lodash from "lodash";

let that;
export default {
    name: "patient",
    data() {
        return {
            weekList: [{
                id: 1,
                name: '每周一'
            },
                {
                    id: 2,
                    name: '每周二'
                },
                {
                    id: 3,
                    name: '每周三'
                },
                {
                    id: 4,
                    name: '每周四'
                },
                {
                    id: 5,
                    name: '每周五'
                },
                {
                    id: 6,
                    name: '每周六'
                },
                {
                    id: 7,
                    name: '每周日'
                },
            ],
            numberList: [],
            formInline: {
                status: "",
                name: "",
                type_id: "",
                teacher_id: "",
                tag_id: "",
                week: "",
                start_price: "",
                end_price: "",
                id: "",
            },
            form: {
                name: "",
                type_id: "",
                store_id: "",
                tag_id: [],
                num: "",
                price: "",
                can_point_pay:"",
                buy_times: [],
                week: "",
                start_time: "",
                end_time: "",
                time_info: "",
                address: "",
                order: "",
                status: "",
                teacher_id: "",
                image: "",
                desc: "",
                location_visible: false,
                lat: "",
                lon: "",
            },
            tableData: [{
                id: 1,
                name: "社区体能课（周一）",
                type: "体能课程",
                image: "/",
                time: "每星期一17:00~18:00",
                address: "宝安区四季公园",
                desc: "这个课程是有助于儿童健康成长",
                status: 1,
            },],
            id: 0,
            dialogAddCourse: false, //默认新增课程弹框隐藏
            title: "新增课程 ", //默认新增
            isEdit: false, //默认为新增
            page: 1, //默认第一页
            limit: 15, //默认一页显示10条数据
            total: 0,

            editorOption: {
                placeholder: "请输入简介",

            },
            uploadUrl: '',
            isUpload: false, //是否图片上传
            dialogImageUrl: "",
            dialogVisible: false,
            lat: "",
            lon: "",
            teacherList: [],
            typeList: [{
                id: 1,
                name: "体能课程"
            },],
            tagList: [{
                code: 1,
                name: "城市活动"
            }, {
                code: 2,
                name: "活动推荐"
            }],
            //约课详情
            dialogInfo: false,
            pageInfo: 1, //默认第一页
            limitInfo: 15, //默认一页显示10条数据
            totalInfo: 0,
            userCourseList: [],
            course_id: 0,
            infoForm: {
                nickname: '',
                mobile: ''
            },
            storeList: [],
        };
    },
    created() {
        this.formInline.id = this.$route.query.id;
        this.getCourseList();
        this.getTagList();
        this.getTypeList();
        this.getTeacherList();
        this.getStoreList();
        this.getNumberList();
        this.uploadUrl = this.$api.imageUpload;

        this.editorOption = quillRedefine({
            uploadConfig: {
                action: this.uploadUrl,
                name: 'file',
                res: (response) => {
                    return response.data.url;

                },
                placeholder: "请输入简介",

            }

        });
        that = this;
    },
    activated() {
        this.formInline.id = this.$route.query.id;
        this.getCourseList();
        this.getTagList();
        this.getTypeList();
        this.getTeacherList();
        this.getStoreList();
        this.getNumberList();
        this.editorOption = quillRedefine({
            uploadConfig: {
                action: this.uploadUrl,
                name: 'file',
                res: (response) => {
                    return response.data.url;

                },

            }

        });
    },
    components: {
        quillEditor,
        quillRedefine
    },
    methods: {
        getNumberList() {
            this.numberList = [];
            for (let i = 1; i <= 100; i++) {
                this.numberList.push({value: i, label: i + '次'})

            }

        },
        getStoreList() {
            let params = {
                status: 1,
                per_page: 10000,

            }
            this.$get(this.$api.storeApi, params).then((res) => {
                if (res.code == 200) {
                    this.storeList = res.data.data;
                } else {
                    return this.$message.error(res.msg);
                }
            });

        },
        // 点击新增课程按钮
        addCourse() {
            this.title = "新增课程";
            this.dialogAddCourse = true;
            this.isEdit = false;
            this.form.name = "";
            this.form.type_id = "";
            this.form.tag_id = [];
            this.form.price = "";
            this.form.can_point_pay = "";
            this.form.buy_times = [];
            this.form.week = "";
            this.form.start_time = "";
            this.form.end_time = "";
            this.form.time_info = "";
            this.form.address = "";
            this.form.order = "";
            this.form.status = "";
            this.form.teacher_id = "";
            this.form.image = "";
            this.form.desc = "";
            this.form.lat = "";
            this.form.lon = "";
        },
        getTypeList() {
            let params = {
                status: 1,
                page: 1,
                per_page: 1000,
            };
            this.$get(this.$api.courseTypeApi, params).then((res) => {
                if (res.code == 200) {
                    this.typeList = res.data.data;
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },
        getTeacherList() {
            let params = {
                status: 1,
                page: 1,
                role_id: 3,
                per_page: 10000,
            };
            this.$get(this.$api.adminApi, params).then((res) => {
                if (res.code == 200) {
                    this.teacherList = res.data.data;
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },
        getCourseList(page, limit) {
            let params = {
                page: this.page,
                per_page: this.limit,
                status: this.formInline.status,
                name: this.formInline.name,
                type_id: this.formInline.type_id,
                store_id: this.formInline.store_id,
                teacher_id: this.formInline.teacher_id,
                tag_id: this.formInline.tag_id,
                week: this.formInline.week,
                start_price: this.formInline.start_price,
                end_price: this.formInline.end_price,
                id: this.formInline.id,
            };
            this.$get(this.$api.courseApi, params).then((res) => {
                if (res.code == 200) {
                    this.tableData = res.data.data;
                    this.total = res.data.total;
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },
        getTagList() {
            this.$get(this.$api.courseTagApi, {
                per_page: 100,
                status: 1
            }).then((res) => {
                if (res.code == 200) {
                    this.tagList = res.data.data;
                } else {
                    return this.$message.error(res.msg);
                }
            });
        },
        forEachFun(str) {
            let ids = [];
            if (str.length > 0) {
                ids = str.split(",");
                ids.forEach((item, index) => {
                    ids[index] = parseInt(ids[index])

                });
            }
            return ids;

        },
        // 点击编辑按钮
        handleEdit(row) {
            this.title = "编辑课程";
            this.id = row.id;
            this.form.name = row.name;
            this.form.type_id = row.type_id;
            this.form.store_id = row.store_id;
            this.form.tag_id = this.forEachFun(row.tag_ids);
            this.form.price = row.price;
            this.form.can_point_pay = row.can_point_pay.toString();
            this.form.num = row.num;
            this.form.buy_times = row.buy_times;
            this.form.week = row.week;
            this.form.start_time = row.start_time;
            this.form.end_time = row.end_time;
            this.form.address = row.address;
            this.form.time_info = row.time_info;
            this.form.order = row.order;
            this.form.status = row.status;
            this.form.teacher_id = row.teacher_id;
            this.form.image = row.image;
            this.form.desc = row.desc;
            this.dialogAddCourse = true;
            this.form.lat = row.lat;
            this.form.lon = row.lon;
            this.isEdit = true;

        },
        // 点击编辑弹框取消按钮
        goToEdit() {
            this.dialogAddCourse = false;
            this.isEdit = false;
        },
        //报课详情
        handleUserCourse(id) {
            this.$router.push({
                path: '/user_course',
                query: {
                    course_id: id
                }
            })

        },

        // 点击删除按钮
        handleDelete(row) {
            this.$confirm("此操作将永久删除该课程信息, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$delete(this.$api.courseApi + "/" + row.id).then((res) => {
                        if (res.code == 200) {
                            this.getCourseList(this.page, this.limit);
                            return this.$message.success("删除成功！");
                        } else {
                            return this.$message.error(res.msg);
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 分页
        handleSizeChange(size) {
            this.limit = size;
            this.getCourseList();
        },
        handleCurrentChange(index) {
            this.page = index;
            this.getCourseList();
        },

        // 分页
        handleInfoSizeChange(size) {
            this.limitInfo = size;
            this.getUserCourseList();
        },
        handleInfoCurrentChange(index) {
            this.pageInfo = index;
            this.getUserCourseList();
        },
        submitInfoForm() {
            this.getUserCourseList();

        },
        //查询约课详情
        getUserCourseList() {
            let params = {
                course_id: this.course_id,
                page: this.pageInfo,
                per_page: this.limitInfo,
                user_nickname: this.infoForm.nickname,
                mobile: this.infoForm.mobile,
            }
            this.$get(this.$api.userCourseApi, params).then((res) => {
                if (res.code == 200) {
                    this.userCourseList = res.data.data;
                    this.totalInfo = res.data.data.total;
                }

            })

        },
        // 点击查询按钮
        submitForm() {
            this.getCourseList();
        },


        // 提交课程数据确定按钮
        submitCourseData() {
            if (this.form.name == "") {
                return this.$message.error("请输入课程名称！");
            }
            if (this.form.type_id == "") {
                return this.$message.error("请选择课程类别！");
            }
            if (this.form.store_id == "") {
                return this.$message.error("请选择门店！");
            }
            if (this.form.tag_id == "") {
                return this.$message.error("请选择课程标签！");
            }
            if (this.form.price == "") {
                return this.$message.error("请输入课程费用！");
            }
            if (this.form.can_point_pay == "") {
                return this.$message.error("请选择是否可用积分支付！");
            }

            if (this.form.num == "") {
                return this.$message.error("请输入人数限制！");
            }
            if (this.form.buy_times == "") {
                return this.$message.error("请输入可选择购买次数！");
            }
            if (this.form.week == "") {
                // return this.$message.error("请选择周几！");
            }
            if (this.form.start_time == "") {
                return this.$message.error("请选择开始时间！");
            }
            if (this.form.end_time == "") {
                return this.$message.error("请选择结束时间！");
            }
            if (this.form.time_info == "") {
                return this.$message.error("请选择具体时间！");
            }
            if (this.form.status == "") {
                return this.$message.error("请选择状态！");
            }
            if (this.form.address == "") {
                return this.$message.error("请输入地址！");
            }
            if (this.form.teacher_id == "") {
                return this.$message.error("请选择教练！");
            }
            if (this.form.image == "") {
                return this.$message.error("请上传图片！");
            }
            if (this.form.desc == "") {
                return this.$message.error("请输入简介！");
            }

            let params = {
                name: this.form.name,
                type_id: this.form.type_id,
                store_id: this.form.store_id,
                tag_id: this.form.tag_id,
                price: this.form.price,
                can_point_pay: this.form.can_point_pay,
                num: this.form.num,
                buy_times: this.form.buy_times,
                week: this.form.week,
                start_time: this.form.start_time,
                end_time: this.form.end_time,
                time_info: this.form.time_info,
                address: this.form.address,
                order: this.form.order,
                status: this.form.status,
                teacher_id: this.form.teacher_id,
                image: this.form.image,
                desc: this.form.desc,
                lat: this.form.lat,
                lon: this.form.lon
            };

            if (this.isEdit) {
                this.$put(this.$api.courseApi + "/" + this.id, params).then((res) => {
                    if (res.code == 200) {
                        this.form.status = false;
                        this.dialogAddCourse = false;
                        this.getCourseList(this.page, this.limit);
                        return this.$message.success("编辑成功！");
                    } else {
                        return this.$message.error(res.msg);
                    }
                });
            } else {
                this.$post(this.$api.courseApi, params).then((res) => {
                    if (res.code == 200) {
                        this.form.status = false;
                        this.dialogAddCourse = false;
                        this.getCourseList(this.page, this.limit);
                        return this.$message.success("新增成功！");
                    } else {
                        return this.$message.error(res.msg);
                    }
                });
            }
        },

        handleAvatarSuccess(res, file) {
            this.form.image = URL.createObjectURL(file.raw);
            if (res.code == 200) {
                this.form.image = res.data.url;
                this.isUpload = true
            }

        },
        beforeAvatarUpload(file) {
            const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') || (file.type ===
                'image/gif');
            const isLt10M = file.size / 1024 / 1024 < 10;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 jpeg、png或者gif格式!');
            }
            if (!isLt10M) {
                this.$message.error('上传头像图片大小不能超过 10MB!');
            }
            return isJPG && isLt10M;
        },

        // 获取地图定位
        getKwd(event) {
            this.$jsonp("https://apis.map.qq.com/ws/place/v1/suggestion", {
                key: "QKFBZ-2WVW4-36EUP-FEWU7-AT7VV-XVFOP",
                output: "jsonp",
                keyword: event,
                region: "广州市",
            })
                .then((res) => {
                    if (res.status === 0) {
                        this.form.lon = res.data[0].location.lng;
                        this.form.lat = res.data[0].location.lat;
                    } else {
                        this.form.lon = "";
                        this.form.lat = "";
                    }
                })
                .catch((e) => {
                    console.log(e);
                });
        },
        searchHandler: lodash.debounce((event) => {
            that.getKwd(event);
        }, 500),

        // 点击跳转至退款页面
        goToRefund(id) {
            this.dialogInfo = false
            this.$router.push({
                path: '/refund',
                query: {
                    order_no: id
                }
            })
        },
        // 点击跳转至约课详情页面
        goToInfo(id) {
            this.dialogInfo = false
            this.$router.push({
                path: '/info',
                query: {
                    order_no: id
                }
            })
        }
    },
};
</script>

<style scoped>
.pagination {
    text-align: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 100%;
    height: 100%;
    display: block;
}

.is-selected {
    color: #1989fa;
}
</style>
